<template>
  <div class="blogArticle">
        <div class="rightbtn">
            <button @click="handleClick" v-show="nextFlag" >下一篇文章</button>
        </div>
    <div class="showpa" v-if="!nextFlag">
        <h3 class="title">抱歉，没有更多内容</h3>
    </div>
    <div class="main" v-else>
      <div class="container">
        <div class="rightBox" id="comment">
            <div >
				<div>
                <div class="titleBox">
					<h1>{{question.title}}</h1>
					<p><i class=""></i><span>{{question.time}}</span><i class=""></i><span>阅读量：{{question.read}}</span></p>
				</div>
				<div class="articleText" v-html="question.content"></div>
			</div>
		</div>
          <div v-bind:comment="question.comment" >
						<div class="commentBox">
              <h3>评论</h3>
							<!-- <p v-if="question.comment.length==0">暂无评论，我来发表第一篇评论！</p> -->
							<div >
								<div class="comment" v-for="(item,index) in question.comment" v-bind:index="index" :key="index" >
									<b>{{item.name}}<span>{{item.time}}</span></b>
									<p @click="changeCommenter(item.name,index)">{{item.content}}</p>
									<div v-if="item.reply.length > 0">
										<div class="reply" v-for="reply in item.reply" :key="reply.time" >
											<b>{{reply.responder}}&nbsp;&nbsp;回复&nbsp;&nbsp;{{reply.reviewers}}
											<span>{{reply.time}}</span>
											</b>
											<p @click="changeCommenter(reply.responder,index)">{{reply.content}}</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
          <div v-bind:type="type" :name="oldComment" >
            <div class="commentBox">
              <h3>发表评论</h3>
              <b v-if="type">你回复&nbsp;{{oldComment}}</b>
              <textarea  value="请填写评论内容" v-model="commentText"></textarea>
              <el-button class="btn" type="primary" round @click="addComment">发表</el-button>
              <el-button class='btn' type="warning" round @click="canelCommit">取消</el-button>
              
            </div>
					</div>
        </div>
      </div>
    </div>
  </div>
      

</template>
<style scoped>
 .title{
    text-align: center;
    height:20px;
    font-size: 30px;
    margin: 50px 0 20px 0;
  }
    .showpa{
        width:920px;
        height: 860px;
        margin: 0 auto;
    }
    .showcontent{
        padding-top: 280px;
        padding-bottom: 200px;
    }
    .showcontent>div{
        height: 300px;
        border: 10px solid;
        font: 15px !important;
    }
    .qqwe{
        margin-top: 15% ;
        font:50px !important;
    }
</style>


<script>
export default {
    beforeRouteUpdate(to, from, next) {
        
        const id = to.params.id;
        // console.log(id)
        this.getData(id)
        next();
    },
      mounted () {
        const id = this.$route.params.id;
        this.getData(id);
        
  },
    methods:{
        handleClick () {
            this.$router.push({
                name: 'CommunChildren',
                params: {
                    id: this.questionId + 1
                }
            })
            },
        getData (id) {
            
            const index = this.passageList.findIndex(item => item.id === id);
            console.log(this.passageList.length)
            if(index !== -1) {
                this.question = this.passageList[index];
                this.questionId = id;
                // console.log(this.questionId)
            } else {
                this.question = '没有更多问题了';
                this.nextFlag = false;
            }
        },
        changeCommenter(name,index) {
			this.oldComment = name;
			this.chosedIndex = index;
            this.type = 1;
      
		},
    addComment() {
      if (this.type == 0) {
        this.question.comment.push({
          name: "session",
          time: getTime(),
          content:this.commentText ,
          reply: []
        });
      } else if (this.type == 1) {
        this.question.comment[this.chosedIndex].reply.push({
          responder: "session",
          reviewers: this.oldComment,
          time: getTime(),
          content: this.commentText,
          reply:[]
        });
        this.type = 0;
      }
      this.commentText = "";
    },

    canelCommit() {
      this.type = 0;
      this.commentText = "";
    },
    },
    
    data(){
        return{
            nextFlag: true,
            questionId: null,
            commentText:"",
            commenter: "session", //评论人
            type: 0, //0为评论作者1为评论别人的评论2为评论别人的别人
            oldComment: null,
            chosedIndex: -1, //被选中的评论的index
            question:[],
            passageList:[{
                id:1001,
                title: "孔乙己节选",
                time: "2020.01.1",
                read: 50,
                ower: '王尔哈',
                content: "<p>鲁镇的酒店的格局，是和别处不同的：都是当街一个曲尺形的大柜台，柜里面预备着热水，可以随时温酒。做工的人，傍午傍晚散了工，每每花四文铜钱，买一碗酒，——这是二十多年前的事，现在每碗要涨到十文，——靠柜外站着，热热的喝了休息；倘肯多花一文，便可以买一碟盐煮笋，或者茴香豆，做下酒物了，如果出到十几文，那就能买一样荤菜，但这些顾客，多是短衣帮，大抵没有这样阔绰。只有穿长衫的，才踱进店面隔壁的房子里，要酒要菜，慢慢地坐喝。</p><p>我从十二岁起，便在镇口的咸亨酒店里当伙计，掌柜说，样子太傻，怕侍候不了长衫主顾，就在外面做点事罢。外面的短衣主顾，虽然容易说话，但唠唠叨叨缠夹不清的也很不少。他们往往要亲眼看着黄酒从坛子里舀出，看过壶子底里有水没有，又亲看将壶子放在热水里，然后放心：在这严重兼督下，羼水也很为难。所以过了几天，掌柜又说我干不了这事。幸亏荐头的情面大，辞退不得，便改为专管温酒的一种无聊职务了。</p>",
                comment: [
                    {
                    name: "专业群演1",
                    time: "2020.01.1",
                    content: "好,西皮，6666",
                    reply: [{
                        responder: "专业捧哏",
                        reviewers: "专业群演1",
                        time: "2020.01.2",
                        content: "你说得对"
                        },{
                        responder: "专业群演1",
                        reviewers: "专业捧哏",
                        time: "2020.01.1",
                        content: "很强"
                    }]
                    },
                    {
                    name: "路过群演2",
                    time: "2020.02.1",
                    content: "好,讲得非常好，good",
                    reply: []
                    }]
                },


                {
                id:1002,
                title: "呐喊自序",
                time: "2020.01.1",
                read: 50,
                content: "<p>Ｓ会馆③里有三间屋，相传是往昔曾在院子里的槐树上缢死过一个女人的，现在槐树已经高不可攀了，而这屋还没有人住；许多年，我便寓在这屋里钞古碑④。客中少有人来，古碑中也遇不到什么问题和主义，而我的生命却居然暗暗的消去了，这也就是我惟一的愿望。夏夜，蚊子多了，便摇着蒲扇坐在槐树下，从密叶缝里看那一点一点的青天，晚出的槐蚕又每每冰冷的落在头颈上。</p><p>那时偶或来谈的是一个老朋友金心异⑤，将手提的大皮夹放在破桌上，脱下长衫，对面坐下了，因为怕狗，似乎心房还在怦怦的跳动。</p>",
                comment: [
                    {
                    name: "专业群演1",
                    time: "2020.01.2",
                    content: "好,西皮，6666",
                    reply: [{
                        responder: "专业捧哏",
                        reviewers: "专业群演1",
                        time: "2020.01.3",
                        content: "你说得对"
                        },{
                        responder: "专业群演1",
                        reviewers: "专业捧哏",
                        time: "2020.01.4",
                        content: "很强"
                    }]
                    },
                    {
                    name: "路过群演2",
                    time: "2020.01.5",
                    content: "好,讲得非常好，good",
                    reply: []
                    }]
                },
                {
                id:1003,
                title: "孔乙己节选",
                time: "2020.01.1",
                read: 50,
                content: "<p>鲁镇的酒店的格局，是和别处不同的：都是当街一个曲尺形的大柜台，柜里面预备着热水，可以随时温酒。做工的人，傍午傍晚散了工，每每花四文铜钱，买一碗酒，——这是二十多年前的事，现在每碗要涨到十文，——靠柜外站着，热热的喝了休息；倘肯多花一文，便可以买一碟盐煮笋，或者茴香豆，做下酒物了，如果出到十几文，那就能买一样荤菜，但这些顾客，多是短衣帮，大抵没有这样阔绰。只有穿长衫的，才踱进店面隔壁的房子里，要酒要菜，慢慢地坐喝。</p><p>我从十二岁起，便在镇口的咸亨酒店里当伙计，掌柜说，样子太傻，怕侍候不了长衫主顾，就在外面做点事罢。外面的短衣主顾，虽然容易说话，但唠唠叨叨缠夹不清的也很不少。他们往往要亲眼看着黄酒从坛子里舀出，看过壶子底里有水没有，又亲看将壶子放在热水里，然后放心：在这严重兼督下，羼水也很为难。所以过了几天，掌柜又说我干不了这事。幸亏荐头的情面大，辞退不得，便改为专管温酒的一种无聊职务了。</p>",
                comment: [
                    {
                    name: "专业群演1",
                    time: "2020.01.2",
                    content: "好,西皮，6666",
                    reply: [{
                        responder: "专业捧哏",
                        reviewers: "专业群演1",
                        time: "2020.01.3",
                        content: "你说得对"
                        },{
                        responder: "专业群演1",
                        reviewers: "专业捧哏",
                        time: "2020.01.4",
                        content: "很强"
                    }]
                    },
                    {
                    name: "路过群演2",
                    time: "2020.01.5",
                    content: "好,讲得非常好，good",
                    reply: []
                    }]
                }
            ]
        }
    }
}
function getTime() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  month.length < 2 ? "0" + month : month;
  day.length < 2 ? "0" + day : day;
  return year + "." + month + "." + day;
}
</script>
